<template>
  <view class="index">
	 
    <view class="llc">
	    <image class="llc-avatar" src="https://devpic.jcbtest.com/product/0f6f7cf6-0638-4050-b7ad-d2cca6908ed9/7c0af9b0-7951-11ee-a049-c94b43036ee2.webp"></image>
    </view>

    <nut-toast :msg="msg2" v-model:visible="show" type="text" :cover="cover"/>
	  
	  <view class="menu-box">
		  <view class="item" v-for="(item,index) in menuList" :key="index" @click="handleClick">
			  <image :src="item.icon" class="icon"></image>
			  <view>{{item.name}}</view>
		  </view>
	  </view>
  </view>
</template>

<script setup>
import {onMounted, reactive, ref, toRefs} from 'vue';
import { Dongdong } from '@nutui/icons-vue-taro';
import Taro from "@tarojs/taro";
const msg= ref('欢迎使用 加入了了春后援会')
const msg2= ref('糟糕～ 资金不足 无法打开此模块 请为爱豆募捐')
const type= ref('text')
const show= ref(false)
const cover= ref(false)
const menuList = [
	{
		icon:'https://devpic.jcbtest.com/icon/92828c1a-da71-4725-8427-83661fc3f34d/c23ce660-79fa-11ee-9ab6-2d4f62a1a896.png',
		name:'爱豆动态'
	},
	{
		icon:'https://devpic.jcbtest.com/icon/92828c1a-da71-4725-8427-83661fc3f34d/c23ce660-79fa-11ee-9ab6-2d4f62a1a896.png',
		name:'爱豆故事'
	},
	{
		icon:'https://devpic.jcbtest.com/icon/92828c1a-da71-4725-8427-83661fc3f34d/c23ce660-79fa-11ee-9ab6-2d4f62a1a896.png',
		name:'粉丝动态'
	},
	{
		icon:'https://devpic.jcbtest.com/icon/92828c1a-da71-4725-8427-83661fc3f34d/c23ce660-79fa-11ee-9ab6-2d4f62a1a896.png',
		name:'地方分会'
	},
	{
		icon:'https://devpic.jcbtest.com/icon/92828c1a-da71-4725-8427-83661fc3f34d/c23ce660-79fa-11ee-9ab6-2d4f62a1a896.png',
		name:'粉丝活动'
	},
	{
		icon:'https://devpic.jcbtest.com/icon/92828c1a-da71-4725-8427-83661fc3f34d/c23ce660-79fa-11ee-9ab6-2d4f62a1a896.png',
		name:'应援活动'
	}
]
onMounted(() => {
	// Taro.showShareMenu({
	// 	withShareTicket: true,
	// 	menus: ['shareAppMessage', 'shareTimeline']
	// });
})
const handleClick = () => {
	show.value = true;
};


</script>

<style lang="scss">
.index {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	width:100%;
	height:10000px;
	background-size: cover;
	background-repeat: no-repeat;
	z-index:0;
	background-image: url('https://devpic.jcbtest.com/product/9bb1172b-9a97-4d79-b435-57bd98cbb75e/cd53a1f0-79f6-11ee-a8e4-e31cd2784842.png');
}
.llc{
	width:100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position-y: -400px;
	z-index:1;
	background-image:url('https://devpic.jcbtest.com/product/1d6dfb33-8c1d-48eb-bf29-8f156dccf970/85492ad0-79f4-11ee-a8e4-e31cd2784842.webp') ;
}
.llc-avatar{
	z-index:2;
}
.menu-box{
	width: 710px;
	padding: 20px;
	box-sizing: border-box;
	border-radius:20px;
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
	background-color: #fff;
	z-index:3;
	position:absolute;
	left: 20px;
	top: 600px;
	height: 300px;
	display: flex;
	flex-wrap: wrap; justify-content: space-between;
}
.item{
	width:30%;
	font-size:26px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	.icon{
		width:60px;
	}
}
</style>
